<template>
  <div class="header">
    <div class="header_left">
      <span>节约土地资源，保护生态环境</span>
    </div>
    <div class="header_center">
        <img  src="../assets/imgs/title.png" alt="">
    </div>
    <div class="header_right">
      <!-- <div class="right_item">{{ weatherDate.weather }}</div>
      <div class="right_item">{{ weatherDate.wind }}</div>
      <div class="right_item">{{ weatherDate.temperature }}</div> -->
      <!-- <span>/</span> -->
      <div class="right_item">{{ weatherDate.date }}</div>
      <span>/</span>
      <div class="right_item">星期{{ weatherDate.week }}</div>
      <span>/</span>
      <div class="right_item">{{ weatherDate.time }}</div>
      <div class="link_btn" >公益性公墓入口</div>
      <router-link class="link_btn" to="/">数据</router-link>
      <router-link class="link_btn" to="/map">地图</router-link>
    </div>
  </div>
</template>

<script>

import axios from 'axios'
export default {
  data() {
    return {
      timeInterval: null,
      weekMap: {
        0: "日",
        1: "一",
        2: "二",
        3: "三",
        4: "四",
        5: "五",
        6: "六",
      },
      weatherDate: {
        time: "",
        week: "",
        date: "",
        temperature: "", // 温度
        weather: "", // 天气
        wind: "", // 风向
      },
    };
  },
  components: {},
  created() {
    // this.getWeather();
    this.setTimeLoop();
  },
  methods: {
    // 获取天气
    async getWeather() {
      const res = await axios.get(
        "https://tianqiapi.com/api?version=v6&appid=58192418&appsecret=K8vdzO7t"
      );
      if (res.status === 200) {
        this.weatherDate.weather = res.data.wea;
        this.weatherDate.temperature = `${res.data.tem2}-${res.data.tem1}℃`;
        this.weatherDate.wind = res.data.win;
      }
    },
    // 获取时间
    setTimeLoop() {
      if (this.timeInterval) {
        clearInterval(this.timeInterval);
      }
      const nowDate = new Date();
      this.weatherDate.time = this.$dayjs(nowDate).format("hh:mm:ss");
      this.weatherDate.week = this.weekMap[nowDate.getDay()];
      this.weatherDate.date = this.$dayjs(nowDate).format("YYYY.MM.DD");
      this.timeInterval = setInterval(() => {
        const nowDate = new Date();
        this.weatherDate.time = this.$dayjs(nowDate).format("hh:mm:ss");
        this.weatherDate.week = this.weekMap[nowDate.getDay()];
        this.weatherDate.date = this.$dayjs(nowDate).format("YYYY.MM.DD");
      }, 1000);
    },

  },
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 100%;
  height: 0.83rem;
  padding: 0 0.3875rem;
  justify-content: space-between;
  .header_left{
    padding-top: .1875rem;
  }
  .header_center{
    width: 7.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left:3.75rem;

    img{
        width: 6.25rem;
        // width: 7.4625rem;
        height: auto;
    }
  }
  .header_right {
    display: flex;
    align-items: center;
     padding-top: .1875rem;
     .link_btn{
      color: #fff;
      margin-left: .125rem;
      padding:.125rem.1875rem;
      background: #409eff;
      border-radius: .0625rem;
     }
     .router-link-exact-active{
      background:#e6a23c ;
     }
  }
}
</style>
